<template>
  <div class="template-word">
  	<div class="word-wrapper">
  		<div class="word-group" @drop="drop" @dragover="allowDrop">
  			<div class="word-content">
  				<template v-for="(aItem, aIndex) in _d.list">
  					<groupH v-if="aItem.type == 'h'" :data="aItem" @delete="deleteRow(aIndex)" @change="changeData($event, aIndex)"/>
  					<groupTable v-else-if="aItem.type == 'table'" :data="aItem" @delete="deleteRow(aIndex)" @change="changeData($event, aIndex)"></groupTable>
  					<groupLine v-else-if="aItem.type == 'line'" :data="aItem" :index="aIndex" @delete="deleteRow(aIndex)" @change="changeData($event, aIndex)">
  						<template v-if="aItem.children">
  							<template v-for="(bItem, bIndex) in aItem.children">
	  							<groupText v-if="bItem.type == 'text'" :data="bItem" @delete="deleteRow(aIndex, bIndex)" @change="changeData($event, aIndex, bIndex)"></groupText>
	  							<groupInput v-else-if="bItem.type == 'input'" :data="bItem" @delete="deleteRow(aIndex, bIndex)" @change="changeData($event, aIndex, bIndex)"></groupInput>
	  						</template>
  						</template>
  					</groupLine>
  				</template>
  			</div>
  		</div>
  	</div>
  	<div class="handle-box">
  		<div class="title">组件库</div>
  		<ul class="cmp-box">
  			<li v-for="(item, index) in COMPONENT_LIST" :key="index" 
  				class="cmp-btn"
  				draggable="true"
  				@dragstart="drag(index, item.type)">{{item.name}}</li>
  		</ul>
  		<div class="btn-box">
  			<el-button class="btn" type="primary" @click="saveEdit()">保存</el-button>
  		</div>
  	</div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import {COMPONENT_LIST} from "./components.js";
import typeGroup from "./modules/type-group.vue";
import groupH from "./modules/group-h.vue";
import groupLine from "./modules/group-line.vue";
import groupText from "./modules/group-text.vue";
import groupInput from "./modules/group-input.vue";
import groupTable from "./modules/group-table.vue";
import {ImportFile} from "/@/utils/Tools.js";

const _d = reactive({
	drag: {
		index: -1,
		type: ''
	},

	// word列表
	list: []
})

onMounted(() => {
	ImportFile('/FileTemplate/采购项目合同样本-合同.txt').then(res => {
		console.log(res);
		_d.list = res;

	})
})

// 拖拽开始
function drag(index, type) {
	_d.drag.index = index;
	_d.drag.type = type;
}

// 结束
function drop(event) {
	event.preventDefault();
	let cmpItem = JSON.parse(JSON.stringify(COMPONENT_LIST[_d.drag.index]));

	if(['h', 'line', 'table'].includes(_d.drag.type)) {
		_d.list.push(cmpItem);
	} else if(['text', 'input'].includes(_d.drag.type)) {
		let lineBox = getClanNode(event.target, 'group-line-box');
		if(lineBox) {
			let listIndex = lineBox.dataset.index;
			let children = _d.list[listIndex].children || [];
			children.push(cmpItem);
			_d.list[listIndex].children = children;
		}
	}
}

// 拖拽进行
function allowDrop(event) {
	event.preventDefault();
}

// 删除
function deleteRow(aIndex, bIndex = -1) {
	if(bIndex == -1) {
		_d.list.splice(aIndex, 1);
	} else {
		_d.list[aIndex].children.splice(bIndex, 1);
	}
}

// 改变数据
function changeData(data, aIndex, bIndex = -1) {
	if(bIndex == -1) {
		_d.list[aIndex] = data;
	} else {
		_d.list[aIndex].children[bIndex] = data;
	}
}

// 获取父节点
function getClanNode(target, className) {
	let res = false;
	let loop = true;
	do {
		let has = target.classList.contains(className);
		if(has || target.tagName == 'BODY') {
			loop = false;
			if(has) {
				res = target;
			}
		} else {
			target = target.parentNode;
		}
	} while(loop);
	return res;
}

// 保存编辑内容
function saveEdit() {
	console.log(JSON.stringify(_d.list));
}

</script>

<style lang="scss" scoped>
.template-word {
	flex-direction: row !important;
	border: 1px solid #dfdfdf;
	border-radius: 6px;
	.word-wrapper {
		flex: 1;
		width: 0;
		overflow: auto;
		padding: 10px;
		.word-group {
			margin: 0 auto;
			padding: 20px;
			width: 624px;
			background: #fff;
			.word-content {
				width: 100%;
				min-height: 700px;
			}
		}
	}
	.handle-box {
		width: 300px;
		background: #fff;
		border-left: 1px solid #dfdfdf;
		display: flex;
		flex-direction: column;
		.title {
			line-height: 40px;
			text-align: center;
			font-size: 18px;
			border-bottom: 1px solid #dfdfdf;
		}
		.cmp-box {
			flex: 1;
			height: 0;
			padding: 20px;
			&:after {
				content: '';
				display: block;
				clear: both;
			}
			.cmp-btn {
				float: left;
				width: 116px;
				height: 34px;
				line-height: 32px;
				border: 1px solid #DCDFE6;
				padding: 0 8px;
				list-style: none;
				margin-bottom: 6px;
				cursor: move;
				&:nth-child(2n+1) {
					margin-right: 6px;
				}
			}
		}
		.btn-box {
			border-top: 1px solid #dfdfdf;
			height: 40px;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.btn {
				width: 100px;
			}
		}
	}
}
</style>